<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="pragma" content="no-cache">
    <meta name="Cache-Control" content="no-cache, must-revalidate">
    <title>订单信息</title>
    <link rel="stylesheet" type="text/css" th:href="@{css/buy.css}">
    <link rel="stylesheet" type="text/css" th:href="@{css/tempAlert.css}">
</head>
<body>
<section class="item_sec">
    <div class="item_wrap rel">
        <input type="hidden" id="txtGoodsId" th:value="${goods.id}"/>
        <div class="img_wrap"><img th:src="${goods.img}" height="70"></div>
        <p class="item_tle" id="goodsName" th:text="${goods.name}"></p>
        <p class="item_pay">货到付款并包邮</p>
        <ul class="sku_ul">
        </ul>
        <p>已有：<span style="color:red;text-align:center" th:text="${buyerNumber}"></span>人购买</p>
        <p>
            <label>价格: <span id="spanPrice"></span>分</label>
            <br/>
            <input type="radio" name="pay_type" value="1">支付宝
            <input type="radio" name="pay_type" value="2" checked="checked">微信支付
        </p>
    </div>
</section>
<section class="item_sec">
    <div class="item_wrap add">
        <p class="row">
            <label for="name">收货人</label>
            <input required="required" id="name" class="block input" type="text"
                   placeholder="请输入您的姓名或称呼">
        </p>
        <p class="row">
            <label for="phone">联系手机</label>
            <input required="required" id="phone" maxlength="11" class="block input" type="tel"
                   placeholder="请输入您的手机号码">
        </p>
        <p class="row">
            <label for="phone">购买数量</label>
            <input required="required" onchange="calPrice()" id="num" maxlength="11" class="block input" type="number"
                   placeholder="购买数量">
        </p>
        <p class="row">
            <label for="phone">选择型号</label>
            <select id="skuId" onchange="calPrice()">
                <option th:each="sku:${skuList}" th:value="${sku.id}"
                        th:text="${sku.title}" th:price="${sku.price}"></option>
            </select>
        </p>
        <p class="row">
            <label for="province">选择地区</label>
            <input type="hidden" name="provinceName">
            <select style="width:130px" id="province" name="provinceCode" onchange="getCity()">
            </select>
            <input type="hidden" name="cityName">
            <select style="width:130px" id="city" name="cityCode" onchange="getArea()">
            </select>
            <input type="hidden" name="areaName">
            <select style=" width:130px" id="area" name="areaCode">
            </select>
           <!-- <input id="province" type="text" placeholder="省">
            <input id="city" type="text" placeholder="市">
            <input id="area" type="text" placeholder="区">-->
        </p>
        <p class="row row_area">
            <label for="address">详细地址</label>
            <input required="required" id="address" class="block input"
                   placeholder="请填写详细地址，方便快递人员送货上门"
                   type="text" value="">
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
        </p>
        <p class="row row_area">
            <label for="remark">您的留言</label>
            <input id="remark" class="block input" type="text" value=""
                   placeholder="可以告诉卖家您对商品的特殊要求，如：颜色、数量等">
        </p>
    </div>
</section>
<footer>
    <button type="button" class="c_txt orange_bg" id="buy_now" onclick="createOrder()">提交订单</button>
</footer>
<div style="height:100px;">&nbsp;
    注：提交订单后我们会有专门的客服与您联系，请保持手机畅通。
</div>


<script type="text/javascript" th:src="@{js/address.js}"></script>
<script type="text/javascript" th:src="@{js/jquery-1.10.2.min.js}"></script>
<script type="text/javascript" th:src="@{js/tempAlert.js}"></script>

<script type="text/javascript">

    $(function(){
        $.ajax({
            url: "http://localhost:8082/corporation/queryProvince",
            dataType:"json",
            type:"post",
            data:"",
            success:function(data){
                var provinceId="";
                var province="";
                $(data).each(function(a,b){
                    if(b.provinceId){
                        provinceId=b.provinceId;
                    }
                    if(b.province){
                        province=b.province;
                    }
                    $("#province").append("<option value='"+provinceId+"'>"+province+"</option>");
                })
            }
        })
    })

    function getCity(){
        var provinceId=$("#province option:selected").val();
        $.ajax({
            url:"http://localhost:8082/corporation/queryCity",
            dataType:"json",
            type:"post",
            data:{"provinceId":provinceId},
            success:function(data){
                $("#city").html("<option></option>");
                $("#area").html("<option></option>");
                var cityId="";
                var city="";
                $(data).each(function(a,b){
                    if(b.cityId){
                        cityId=b.cityId;
                    }
                    if(b.city){
                        city=b.city;
                    }
                    $("#city").append("<option value='"+cityId+"'>"+city+"</option>");
                });
            }
        });
    }

    function getArea(){
        var cityId=$("#city option:selected").val();
        $.ajax({
            url:"http://localhost:8082/corporation/queryArea",
            dataType:"json",
            type:"post",
            data:{"cityId":cityId},
            success:function(data){
                $("#area").html("<option></option>");
                var areaId="";
                var area="";
                $(data).each(function(a,b){
                    if(b.areaId){
                        areaId=b.areaId;
                    }
                    if(b.area){
                        area=b.area;
                    }
                    $("#area").append("<option value='"+areaId+"'>"+area+"</option>");
                });
            }
        })
    }




    function calPrice(res) {
        var price = parseFloat($("option:selected").attr("price"));//单价
        var num = $("#num").val(); //购买数量
        var totalPrice = num * price ;//总价 单位：分
        $("#spanPrice").text(totalPrice);
    }

    var order = {
        "goodsId":null,
        "skuId":null,
        "merchantId":null,//商户id,后台填充
        "goodsName":null,
        "number":null,//订单编号，后台填充
        "province":null,
        "city":null,
        "district":null,
        "address":null,
        "buyername":null,
        "phone":null,
        "num":null,//数量
        "remark":null,//留言
        "payType":null,//支付类型
        "payStatus":null,//支付状态，后台填充
        "price":null//总价
    };

    function createOrder() {
        order.goodsName = $("#goodsName").text(); //商品名称
        order.buyername = $("#name").val();  //买家姓名
        order.phone = $("#phone").val(); //买家电话号码
        order.goodsId = $("#txtGoodsId").val(); //商品id
        order.address = $("#address").val(); //收货详细地址
        order.remark = $("#remark").val(); //买家留言
        order.payType = $("input[name=pay_type]:checked").val(); //支付方式
        order.province = $("#province option:selected").text(); //省份
        order.city = $("#city option:selected").text(); // 城市
        order.district = $("#area option:selected").text();// 地区
        order.num = $("#num").val(); //购买数量
        order.price = $("#spanPrice").text();//总价
        order.skuId = $("#skuId").val(); //套餐id

        post("order/createOrder", order, function (result) {
            reload(base + "order/list"); //订单管理页面
        });
    }
</script>

</body>
</html>